<template>
  <div class="album" @click="goList">
    <div class="album-cover-bg"></div>
    <div
      :title="item.title"
      class="album-img"
      :style="{backgroundImage:'url('+item.front_cover+')'}"
    >
      <div class="sound-num">
        <span>{{item.music_count}}</span>
      </div>
    </div>
    <div class="title">{{item.title}}</div>
  </div>
</template>

<script>
export default {
    props:["item"],
    methods:{
      goList(){
        this.$router.push({
          name:"album",
          params:{
            id:this.item.id
          }
        })
      }
    }
};
</script>

<style lang="stylus" scoped>
.album
    display block
    width calc((100vw - 0.28rem) / 2 - 0.1rem)
    margin 0 0 0.1rem
    position relative
    .album-cover-bg
        width 100%
        padding-bottom 100%
        position absolute
        background url('https://static.missevan.com/assets/m/images/build/album-cover.efe70663.png') no-repeat
        background-size contain
    .album-img
        position relative
        height calc((100vw - 0.28rem) / 2 - 0.28rem)
        border none
        width calc((100vw - 0.28rem) / 2 - 0.28rem)
        background-color #e0e0e0
        overflow hidden
        border-radius .04rem
        background-repeat no-repeat
        background-position 50%
        background-size 100%
        display flex
        align-items flex-end
        .sound-num
            width 100%
            height .36rem
            line-height .24rem
            padding 0 .05rem
            display flex
            justify-content flex-end
            align-items center
            background linear-gradient(180deg,transparent,rgba(0,0,0,.26))
            >span 
                text-shadow 0.005rem 0 0.01rem #000
                display flex
                align-items center
                font-size .12rem
                color #ffffff
                padding-left .12rem
                
            >span:before
                content ""
                display block
                background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.8e0a6b22.png')
                width .11rem
                height .13rem
                background-position 0 -0.42rem
                background-size .56rem .55rem
                margin-right .02rem
    .title
        margin-top 0.06rem
        width 100%
        height .4rem
        overflow hidden
        text-overflow ellipsis 
        word-break break-all
        line-height .2rem
        white-space normal
        color #616161
        font-size .13rem
</style>